<!--外卖功能部分-->
<template>
  <div class="home">
    <div class="header">
      <div class="address">
        <div class="back" @click="$router.push('/')">
          <van-icon name="arrow-left" />
          <span>外卖</span>
        </div>
        <van-icon name="location-o" />
        <span>云南大学呈贡校区</span>
        <van-icon name="arrow-down" />
        <div class="icon_right">
          <van-icon name="chat-o" dot size="20"/>
        </div>
      </div>
      <div class="top">
        <div class="search">
          <input type="text" placeholder="请输入关键字" readonly />
          <span>搜索</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="item_image"></div>
        <span>{{item.name}}</span>
      </div>
    </div>
    <div class="scroll">
      <span>神劵商家</span>
      <span>减配送费</span>
      <span>满赠活动</span>
      <span>点评高分</span>
    </div>
    <div class="stop">
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm01.jpg" alt="">
        <div class="stop_info">
          <div class="title">韩食匠·韩式炸鸡</div>
          <div class="comment">
            <span>4.9分</span>
            <span>月销5000+</span>
            <span>人均 ￥16</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥0 免配送费</span>
            <span >40分钟 4.1km</span>
          </div>
          <div class="tags">
            <span>炸鸡人气榜 呈贡区第1名</span>
            <span>22.3万人跟榜买</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm02.jpg" alt="">
        <div class="stop_info">
          <div class="title">冒菜西施·火锅冒菜</div>
          <div class="comment">
            <span>4.6分</span>
            <span>月销2000+</span>
            <span>人均 ￥17</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥20 配送费约￥0.8</span>
            <span >40分钟 4.0km</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm03.jpg" alt="">
        <div class="stop_info">
          <div class="title">肯德基宅急送(高铁南站)</div>
          <div class="comment">
            <span>4.8分</span>
            <span>月销3000+</span>
            <span>人均 ￥17</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥20 配送费约￥0.3</span>
            <span >40分钟 7.85km</span>
          </div>
          <div class="tags">
            <span>昆明南站/呈贡大学城汉堡人气榜第4名</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm04.jpg" alt="">
        <div class="stop_info">
          <div class="title">热辣滚烫·甘肃天水麻辣烫</div>
          <div class="comment">
            <span>4.8分</span>
            <span>月销3000+</span>
            <span>人均 ￥16</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥15 免配送费</span>
            <span >60分钟 5.2km</span>
          </div>
          <div class="tags">
            <span>呈贡区麻辣烫热销榜第1名</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm05.jpg" alt="">
        <div class="stop_info">
          <div class="title">壹宾犟人烧烤研究所</div>
          <div class="comment">
            <span>4.7分</span>
            <span>月销6000+</span>
            <span>人均 ￥23</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥36.9 配送费￥0.5</span>
            <span >40分钟 4.5km</span>
          </div>
          <div class="tags">
            <span>刚刚有用户下单</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm06.jpg" alt="">
        <div class="stop_info">
          <div class="title">袁记云饺(仕林街店)</div>
          <div class="comment">
            <span>4.8分</span>
            <span>月销9000+</span>
            <span>人均 ￥20</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥20 配送费约￥0.7</span>
            <span >40分钟 3.7km</span>
          </div>
          <div class="tags">
            <span>呈贡区饺子人气榜第1名</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm07.jpg" alt="">
        <div class="stop_info">
          <div class="title">三只龙虾`牛蛙`海鲜</div>
          <div class="comment">
            <span>4.8分</span>
            <span>月销800+</span>
            <span>人均 ￥38</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥0 配送￥2</span>
            <span >49分钟 3.8km</span>
          </div>
          <div class="tags">
            <span>“品质绝对对得起这个价”</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm08.jpg" alt="">
        <div class="stop_info">
          <div class="title">一周七天-花甲粉</div>
          <div class="comment">
            <span>4.8分</span>
            <span>月销400+</span>
            <span>人均 ￥18</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥15 配送费￥3.8</span>
            <span >40分钟 3.9km</span>
          </div>
          <div class="tags">
            <span>花甲粉好评榜 昆明第1名</span>
            <span>8496人跟榜买</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm09.jpg" alt="">
        <div class="stop_info">
          <div class="title">东北大馅水饺</div>
          <div class="comment">
            <span>4.8分</span>
            <span>月销3000+</span>
            <span>人均 ￥17</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥15 配送费￥1.3</span>
            <span >40分钟 3.7km</span>
          </div>
          <div class="tags">
            <span>超值低价店铺</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
      <div class="stop_item" v-for="(item, index) in 1" :key="index">
        <img src="../assets/wm10.jpg" alt="">
        <div class="stop_info">
          <div class="title">切果猩球(实力锦城店)</div>
          <div class="comment">
            <span>4.6分</span>
            <span>月销1000+</span>
          </div>
          <div class="line">
            <span style="margin-right:36px">起送 ￥10 免配送费</span>
            <span >30分钟 2.8km</span>
          </div>
          <div class="tags">
            <span>-扣力度前10%商家</span>
          </div>
          <img src="../assets/img.png" alt="" class="igg">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //依旧是补充
      list: [
        {
          name: "美食"
        },
        {
          name: "甜品饮水"
        },
        {
          name: "超市便利"
        },
        {
          name: "蔬菜水果"
        },
        {
          name: "看病买药"
        },
        {
          name: "晚餐"
        },
        {
          name: "拼好饭"
        },
        {
          name: "跑腿"
        },
        {
          name: "每日神价"
        },
        {
          name: "领米粒"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.home {
  background: #fdfffe;
}
.header {
  background: yellow;
  padding: 10px;
  .address {
    margin-bottom: 10px;
  }
  .top {
    display: flex;
    align-items: center;
    .qrcode {
      width: 30px;
      height: 30px;
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 28px;
      }
    }
  }
  .search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 30px;
    flex: 1;
    padding: 2px 4px;
    input {
      flex: 1;
      height: 100%;
      padding: 0 6px;
      resize: none;
      outline: none;
      border: none;
      font-size: 14px;
    }
    span {
      padding: 6px 12px;
      border-radius: 30px;
      background: yellow;
      font-size: 14px;
    }
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-bottom: 10px;
  .item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    span {
      font-size: 14px;
    }

    .item_image {
      width: 40px;
      height: 40px;
      background: #ccc cover;
      margin-bottom: 4px;
      background: url("../assets/itme1.png") no-repeat;
      background-size: 252px;
    }
    &:nth-child(2) {
      .item_image {
        background-position: -52px 0;
      }
    }
    &:nth-child(3) {
      .item_image {
        background-position: -105px 0;
      }
    }
    &:nth-child(4) {
      .item_image {
        background-position: -159px 0;
      }
    }
    &:nth-child(5) {
      .item_image {
        background-position: -213px 0;
      }
    }
    &:nth-child(6) {
      .item_image {
        background-position: 0 -53px;
      }
    }
    &:nth-child(7) {
      .item_image {
        background-position: -54px -54px;
      }
    }
    &:nth-child(8) {
      .item_image {
        background-position: -107px -52px;
      }
    }
    &:nth-child(9) {
      .item_image {
        background-position: -162px -53px;
      }
    }
    &:nth-child(10) {
      .item_image {
        background-position: -214px -53px;
      }
    }
    &:nth-child(11) {
      .item_image {
        background-position: 0 -132px;
      }
    }
    &:nth-child(12) {
      .item_image {
        background-position: -76px -132px;
      }
    }
    &:nth-chld(13) {
      .item_image {
        background-position: -152px -132px;
      }
    }
    &:nth-child(14) {
      .item_image {
        background-position: -225px -132px;
      }
    }
    &:nth-child(15) {
      .item_image {
        background-position: -302px -132px;
      }
    }
  }
}

.address {
  position: relative;
  display: flex;
  align-items: center;
  .icon_right{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
  }
}
.back {
  font-weight: 700;
  margin-right: 8px;
}
.stop{
  padding: 10px;
  background: #f6f6f6;
}
.stop_item{
  display: flex;
  font-size: 12px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  span{
    display: inline-block;
  }
  .title{;
    font-weight: 700;
    font-size: 14px
  }
  .comment{
    span{
      margin-right: 4px;
      &:first-child{
        font-weight: 700;
        color: rgb(216, 85, 4);
      }
    }
  }
  &>img{
    width: 95px;
    height: 95px;
    border-radius: 8px;
    margin-right: 10px;
  }
  .igg{
    width: 164px;
  }
  .tags{
    margin: 2px 0;
    span{
      margin-right: 8px;
      padding: 2px 4px;
      color: red;
      border-radius: 8px;
      background: rgb(251 233 197);
    }
  }
}
.scroll{
  background: #f6f6f6;
  padding-top: 10px;
  display: flex;

  overflow-x: scroll;
  span{
    flex-shrink: 0;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
    background: #fff;
    padding: 4px 16px;
    font-size: 14px;
    
  }
}

/* 隐藏垂直滚动条 */
.scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}
 
</style>